<template>
	<view class="faq-box">
		<view class="faq-box-top">
			<view class="view" :class="{'active':tabIdx== index}" v-for="(item,index) in form.tabList" :key="index" @click="checkTab(item,index)">{{item.name}}</view>
		</view>
		<view class="faq-box-btm">
			<scroll-view
				scroll-y="true"
				refresher-enabled="true" 
				@refresherrefresh="onRefresh"
				@scrolltolower="loadMore" 
				:refresher-triggered="isRefreshing"
				style="height: 100%"
			>
				<view v-if="form.dataList&&form.dataList.length > 0" class="faq-list-item" v-for="(item, index) in form.dataList" @click="goDetail(item)" :key="index">
					<view><span>{{index + 1}}、</span>{{item.name}}</view>
					<image :src="$imgUrl + '/personal/detail-icon.png'" mode=""></image>
				</view>
				<view v-else>
					<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {reactive, ref} from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { getProgram, getArticle } from '@/common/API/notice';

	const tabIdx = ref(0)
	const isRefreshing= ref(false)
	const isLoadMore = ref(false)
	
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		page: 1,
		dataList: [],
		tabList: [],
		programId: null
	})
	//切换tab
	const checkTab = (item:any,index:number) => {
		tabIdx.value = index
		form.programId = item.id
		form.pageNo = 1
		form.pageSize = 10
		getProgramList()
	}
	//下拉刷新
	const onRefresh = () => {
		form.pageNo = 1
		form.pageSize = 10
		isRefreshing.value = true;
		getProgramList()
		setTimeout(() => {
		    isRefreshing.value = false;
		    uni.stopPullDownRefresh()
		}, 500)
	}
	//加载更多
	const loadMore = () => {
		console.log('上拉加载更多')
		if(form.pageNo >= form.page){
			return
		}
		form.pageNo ++
		isLoadMore.value = true;
		getProgramList()
		setTimeout(() => {
			isLoadMore.value = false;
		}, 2000)
	}
	const goDetail = (item:any) => {
		uni.navigateTo({
			url: `/pages/personal/faq/detail?info=${encodeURIComponent(JSON.stringify(item))}`
		})
	}
	//获取栏目Tab
	const getProgramTab = async () => {
		let data = {
			pageNo: 1,
			pageSize: 100,
			programType: 2
		}
		let res = await getProgram(data)
		if(res){
			form.tabList = res.list
			form.programId = form.tabList[0].id
			getProgramList()
		}
	}
	const getProgramList = async () => {
		uni.showLoading({
			title:'加载中...'
		});
		let data = {
			pageNo: form.pageNo,
			pageSize: form.pageSize,
			programType: 2,
			programId: form.programId
		}
		let res = await getArticle(data)
		if(res){
			uni.hideLoading()
			form.page = res.total? Math.ceil(res.total/form.pageSize) : 1
			form.dataList = res.list
		}
	}
	onLoad(()=>{
		getProgramTab()
	})
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.faq-box{
		display: flex;
		flex-direction: column;
		// height: 100%;
		background: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
		flex: 1;
	}
	.faq-box-top{
		// display: flex;
		overflow-x: scroll;
		white-space: nowrap;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
		.view{
			// flex: 1;
			display: inline-block;
			width: 160rpx;
			text-align: center;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 20rpx 10rpx;
			color: rgba(102, 102, 102, 1);
		}
		.view.active{
			color: rgba(253, 150, 24, 1);
			position: relative;
			&::before{
				content: " ";
				position: absolute;
				left: 50%;
				transform: translateX(-24rpx);
				bottom: 0;
				width: 48rpx;
				height: 4rpx;
				border-top: 4rpx solid rgba(253, 150, 24, 1);
			}
		}
	}
	.faq-box-btm{
		flex: 1;
		overflow: hidden;
		margin-top: 20rpx;
		.faq-list-item{
			display: flex;
			padding: 32rpx;
			background: #fff;
			&>view{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
				flex: 1;
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>